import React, { PureComponent } from 'react'
import {
 Button, Form, Input, Modal, Popconfirm,
} from 'antd'
import {
 BreadcrumbBar, InputSearch, ProTable, ProTableOperate, ProTableOptions,
} from '@/components'
import {
 deleteDataOwner, getDataOwnerById, saveDataOwner, saveNewDataOwner,
} from './api'
import styles from './index.less'

const { Item } = Form
const { TextArea } = Input
const { OperateItem } = ProTableOperate
const menus = [{ name: '数据调研' }, { name: '数据Owner' }]
export default class DataOwner extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      visible: false,
      visible1: false,
      visibleDele: false,
      id: null,
      query: {
        updata: null,
      },
    }
    this.form = React.createRef()
    this.form2 = React.createRef()
    this.tableRef = React.createRef()
  }

  deleteDataOwnerFn = (id) => {
    const { search } = this.state
    this.setState({
      visibleDele: true,
    })
    deleteDataOwner({ id }).then(() => {
      this.tableRef?.current?.resetPageNum()
      this.setState({
        visibleDele: false,
        query: {
          search: search || '',
        },
      })
    })
  }

  saveNewDataOwnerFn = () => {
    const { search } = this.state
    this.form.current.validateFields().then((values) => {
      saveNewDataOwner(values).then((data) => {
        this.tableRef?.current?.resetPageNum()
        this.setState({
          visible: false,
          query: {
            search: search || '',
          },
        })
      })
    })
  }

  getDataOwnerByIdFn = (id) => {
    getDataOwnerById({ id }).then((data) => {
      this.setState({
        visible1: true,
        id: data.id,
      }, () => {
        this.form2.current.setFieldsValue({
          ownerName: data.ownerName,
          ownerDesc: data.ownerDesc,
        })
      })
    })
  }

  saveDataOwnerFn = () => {
    const { id, search } = this.state
    this.form2.current.validateFields().then((values) => {
      saveDataOwner({ ...values, id }).then((data) => {
        this.tableRef?.current?.resetPageNum()
        this.setState({
          visible1: false,
          query: {
            search: search || '',
          },
        })
      })
    })
  }

  render() {
    const { visible, visible1, query } = this.state
    return (
      <div className={styles.page_content_with_breadcrumb}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.page_content}>
          <div className={styles.page_content_right}>
            <ProTableOperate
              toggleOperate={false} // 是否隐藏 收起/展开 按钮 (如果隐藏按钮，handleToggleSta设置属性值不生效)
              unfolded // 默认展开状态
            >
              <OperateItem align="left">
                <InputSearch
                  placeholder="请输入关键词进行搜索"
                  value={this.state.search}
                  onChange={(e) => {
                    this.setState({
                      search: e.target.value,
                    })
                  }}
                  onSearch={() => {
                    const { search } = this.state
                    this.tableRef?.current?.resetPageNum()
                    this.setState({
                      query: {
                        search,
                      },
                    })
                  }}
                />
              </OperateItem>
              <OperateItem itemType="btn">
                {
                  [
                    <Button
                      type="primary"
                      onClick={() => {
                        this.setState({
                          visible: true,
                        })
                        this.form.current && this.form.current.resetFields()
                      }}
                    >
                      新建Owner
                    </Button>,
                  ]
                }
              </OperateItem>
            </ProTableOperate>
            <ProTable
              query={query}
              columns={[
                {
                  title: 'Owner名称',
                  dataIndex: 'ownerName',
                  width: '20%',
                  key: 'ownerName',
                },
                {
                  title: 'Owner描述',
                  dataIndex: 'ownerDesc',
                  width: '30%',
                  key: 'ownerDesc',
                  render: (text, record) => (!text || text === '' ? '--' : text),
                },
                {
                  title: '最近修改时间',
                  dataIndex: 'updateTime',
                  width: '30%',
                  key: 'updateTime',
                },
                {
                  title: '操作',
                  dataIndex: 'operation',
                  width: '20%',
                  key: 'operation',
                  render: (text, record, index) => (
                    <ProTableOptions>
                      {[
                        <span onClick={() => {
                          this.getDataOwnerByIdFn(record.id)
                        }}
                        >
                          编辑
                        </span>,
                        <Popconfirm title="确定要删除吗？" onConfirm={() => { this.deleteDataOwnerFn(record.id) }} visible={this.state.visibleDele === record.id} onCancel={() => { this.setState({ visibleDele: false }) }} okText="是" cancelText="否">
                          <span onClick={() => { this.setState({ visibleDele: record.id }) }}>
                            删除
                          </span>
                        </Popconfirm>,
                      ]}
                    </ProTableOptions>
                  ),
                },
              ]}
              ref={this.tableRef}
              loading={false}
              url="/api/v1/normalization/research/dataowner/getDataOwnerPage"
            />
            <Modal
              title="新建Owner"
              visible={visible}
              width={520}
              onCancel={() => {
                this.setState({
                  visible: false,
                })
              }}
              maskClosable={false}
              onOk={this.saveNewDataOwnerFn}
            >
              <Form
                ref={this.form}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                initialValues={{
                  abled: true,
                }}
              >
                <Item
                  label="Owner名称"
                  name="ownerName"
                  rules={[{ required: true, message: '请输入Owner名称' }]}
                >
                  <Input
                    placeholder="请输入Owner名称"
                  />
                </Item>
                <Item
                  label="描述"
                  name="ownerDesc"
                  rules={[{ required: false }]}
                >
                  <TextArea rows={4} placeholder="请输入描述" />
                </Item>
              </Form>
            </Modal>
            <Modal
              title="编辑Owner"
              visible={visible1}
              width={520}
              onCancel={() => {
                this.setState({
                  visible1: false,
                })
              }}
              maskClosable={false}
              onOk={this.saveDataOwnerFn}
            >
              <Form
                ref={this.form2}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                initialValues={{
                  abled: true,
                }}
              >
                <Item
                  label="Owner名称"
                  name="ownerName"
                  rules={[{ required: true, message: '请输入Owner名称' }]}
                >
                  <Input
                    placeholder="请输入Owner名称"
                  />
                </Item>
                <Item
                  label="描述"
                  name="ownerDesc"
                  rules={[{ required: false }]}
                >
                  <TextArea rows={4} placeholder="请输入描述" />
                </Item>
              </Form>
            </Modal>
          </div>
        </div>
      </div>
    )
  }
}
